<script setup>
import { useUserStore } from '@/store'

const userStore = useUserStore()
</script>

<template>
    <div class="wallet">

        <router-link to="/flow">
            <div class="my-wallet">My Wallet</div>
        </router-link>
        <div class="cash">
            <div class="cash-icon">
                <img src="@/assets/imgs/cash.png" alt="cash" width="30">
            </div>
            <span>${{ userStore.cash }}</span>
        </div>
        <div class="coin">
            <div class="coin-icon">
                <img src="@/assets/imgs/coin.png" alt="cash" width="30">
            </div>
            <span>{{ userStore.coin }}</span>
        </div>
        <router-link to="/exchange">
            <div class="exchange">
                <span>Exchange</span>
            </div>
        </router-link>
    </div>
</template>

<style scoped lang="scss">
.wallet {
    position: relative;
    width: 100%;
    height: 35vmin;
    background-image: url('@/assets/imgs/wallet_bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    .my-wallet {
        position: absolute;
        top: 3vmin;
        left: 3vmin;
        font-size: var(--normal-font-size);
        padding-right: 5vmin;
        transform: translate3d(0, 0, 0);

        &::before {
            content: '';
            position: absolute;
            top: 50%;
            right: 0;
            transform: translateY(-50%) rotate(45deg);
            width: 2.5vmin;
            height: 2.5vmin;
            border-top: 2px solid #fff;
            border-right: 2px solid #fff;
        }
    }

    %tag {
        position: absolute;
        left: 3vmin;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-width: 25vmin;
        height: 8vmin;
        background-color: #fff;
        border-radius: 9999vmin;
        padding: 0 2.5vmin;

        div {
            display: flex;
            justify-content: center;
            width: 8vmin;
        }

        span {
            display: block;
            color: var(--text-color);
            font-weight: bold;
            font-size: var(--middle-font-size);
            min-width: 5vmin;
            line-height: 1;
            padding-left: 2vmin;

            &:last-child {
                color: var(--task-color);
                margin-right: 0;
            }
        }
    }

    .cash {
        @extend %tag;
        top: 11.5vmin;

        img {
            width: 7vmin;
        }
    }

    .coin {
        @extend %tag;
        bottom: 5vmin;

        img {
            width: 5vmin;
        }
    }

    .exchange {
        position: absolute;
        right: 0;
        bottom: 5vmin;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30vmin;
        height: 10vmin;
        background-image: linear-gradient(to right, #FDEDDA, #F3BAAB);
        border-radius: 999vmin 0 0 999vmin;

        span {
            font-size: var(--middle-font-size);
            font-weight: bold;
            color: #B3572E;
        }
    }
}
</style>